<!-- 待处理 已处理 基本信息-->
<template>
	<view class="detail">
		<view class="detail_info">
			<iframe :src="iframUrl" style="height: 400px;width: 100%;"></iframe>
		</view>
		<view class="detail_material">
			<view>
				<view class="detail_material_title">材料清单-{{title}}</view>
				<!-- <view class="detail_material_line"></view> -->
			</view>
			<view style="margin-top: 20px;" v-if="this.param != null && this.cl != null && this.customer != null">
				<view class="detail_material_main" v-for="item in param">
					<view class="detail_material_main_name">
						<!-- <u-icon name="file-text" size="40"></u-icon> -->
						<text class="detail_material_main_name_text">{{item.name}}</text>
					</view>
					<view class="detail_material_main_filename" @click="preview(item.path)">
						<u-icon name="attach" color="#2295ff" v-if="item.filename"></u-icon>
						<text>{{item.filename}}</text>
					</view>
				</view>
				<view class="detail_material_main" v-if="iscitymanager == 3200">
					<view>
						<u-icon name="file-text" size="40"></u-icon>
						<text class="detail_material_main_name_text">{{name}}</text>
					</view>
					<view class="detail_material_main_filename" v-for="item in cl" @click="preview(item.path)">
						<u-icon name="attach" color="#2295ff" v-if="item.filename"></u-icon>
						<text class="detail_material_main_filename_text">{{item.filename}}</text>
					</view>
				</view>
				<view class="detail_material_main" v-for="item in customer" v-if="item != null">
					<view class="detail_material_main_name">
						<u-icon name="file-text" size="40"></u-icon>
						<text class="detail_material_main_name_text">【自】{{item.customerMaterial.name}}</text>
					</view>
					<view class="detail_material_main_filename" @click="preview(item.file.path)">
						<u-icon name="attach" color="#2295ff"></u-icon>
						<text class="detail_material_main_filename_text">{{item.file.filename}}</text>
					</view>
				</view>
			</view>
			<view v-else class="detail_material_empty">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>

		</view>
		<view class="detail_operate" v-if="isEdit">
			<view class="detail_operate_head">
				操作
			</view>
			<view>
				<u-radio-group v-model="radiovalue" placement="row">
					<u-radio :customStyle="{margin: '10px 10px'}" activeColor="#00b952"
						v-for="(item, index) in radiolist" :key="index" :label="item.text_" :name="item.text_"
						@change="radioChange">
					</u-radio>
				</u-radio-group>
			</view>
		</view>

		<view class="detail_advice" v-if="isEdit && type == 2">
			<view class="detail_advice_head">
				<view class="detail_advice_head_text">意见</view>
			</view>
			<view class="detail_advice_input">
				<u-input v-model="advice" placeholder="请输入意见">
					<template slot="suffix">
						<u-button type="primary" text="常用语" @click="getComwordList()"></u-button>
					</template>
				</u-input>
			</view>
		</view>

		<view class="detail_button" v-if="isEdit">
			<u-button text="退回" type="error" @click="sendBack()"></u-button>
			<u-button text="提交" type="primary" @click="submit()"></u-button>
		</view>

		<!-- 选择下一步处理人 -->
		<u-picker :show="show" :columns="candidateList" keyName="fullname" :defaultIndex="[2]"
			@confirm="confirm"></u-picker>

		<!-- 常用语弹框 -->
		<u-modal :show="show1" :closeOnClickOverlay="true" :showConfirmButton="false" @close="show1=false">
			<view class="comword">
				<view class="search">
					<view>
						<u-input placeholder="搜索常用语" v-model="comword"></u-input>
					</view>
					<view>
						<u-button type="primary" @click="search">搜索</u-button>
					</view>
				</view>
				<view class="comword_hint">* 单击选择常用语</view>
				<view class="comword_content">
					<view v-for="(item, index) in menuList" :key="index">
						<view @click="addValue(item.content)" class="comword_content_piece">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getAllMaterialByApplyId,
		auditView,
		customerView,
		queryCustomerMaterialByApplyid,
		taskExec,
		terminationTask,
		queryAct_dsn_btnList,
		viewByProcessStepId,
		queryAct_dsn_form_stepbtnList,
		findBehindTaskExecuser,
		queryCandidateusers,
		getHandleParams
	} from '@/common/api/approve/workflow/mf_MyTasjUndo.js'
	import {
		kkfilePreview
	} from '@/common/js/urils.js';
	import {
		Tp_proctypeEnum
	} from '@/common/enumeration/Tp_proctype.js'
	import {
		Tp_procmaterial_mater_mediate,
		Tp_procmaterial_decision_asynapprove
	} from '@/common/enumeration/Tp_procmaterial.js'
	import {
		CANDIDATE_USER
	} from '@/common/utils/custom/custom-candidate.js'
	import {
		queryList
	} from '@/common/api/std/std_comword.js'
	import {
		SFAPPROVE_URL
	} from "@/common/js/warehouse.js"
	export default {
		name: 'uniFlowBase1',
		props: {
			isEdit: {
				type: Boolean,
				default: false,
				required: true
			},
			type: {
				type: Number,
				default: 1,
				required: true
			},
			applyid: {
				type: String,
				default: '',
				required: true
			},
			taskid: {
				type: String,
				default: '',
				required: true
			},
			formid: {
				type: String,
				default: '',
				required: true
			},
			applyid_bs: {
				type: String,
				default: '',
				required: true
			},
			stepid: {
				type: String,
				default: '',
				required: true
			},
			processinstanceid: {
				type: String,
				default: '',
				required: true
			}
		},
		data() {
			return {
				// 材料清单：
				materiaList: [],
				// 操作按钮
				radiolist: [],
				radiovalue: null,
				// 意见
				advice: null,
				// 附件路径
				path: '',
				//环节
				title: '',
				//材料参数
				param: [],
				//提交参数
				query: {
					handletext: this.radiovalue,
					remark: this.advice,
					variable: {}
				},
				// 材料类型
				kind: undefined,
				// 是否市领导审批
				iscitymanager: undefined,
				// 是否同步制发行行政复议书
				cl: [],
				// 程序类型
				proctype: undefined,
				// 默认材料
				material: [],
				// 自定义材料
				customer: [],
				name: '',
				//完成对象
				ProcessNextExecutor: {
					remark: null, //意见
					handletext: null, //按钮文字
					taskFrom: {}, // 保存表单数据
					variable: {}, // 按钮关联的流程变量
					service: [], // 完成任务后调用的系统服务
				},
				pageInfo: {
					f_enable_: 3200,
					f_formid_: this.formid,
					// f_stepid_: "",
					order: "ASC",
					pageSize: 2147483647,
					sort: "indexsort"
				},
				iframUrl: '',
				eventName: null, // 点击事件的名称
				btnServer: null, // 按钮配置服务
				btnVariable: null, // 按钮绑定的流程变量
				processNext: null, // 下一环节的信息
				taskObj: {
					isNextPerson: false, // 是否需要或指定下一步的处理人 和
					isNextComplete: false, // 是否完成下一步处理人的指定
					taskVariab: {}, // 下一步处理人流程变量对象
				},
				variableMap: {}, // 流程变量
				variableList: [], // 有变量的环节
				groupList: [], //候选组
				userList: [], //候选用户
				variable: null, //流程变量 
				show: false,
				candidateList: [], // 候选列表
				myValue: undefined, // 默认值
				n_stepid: '',
				modelKey: '',
				userid: '',
				show1: false, // 常用语显示
				comword: '', // 输入框值
				menuList: [], // 常用语菜单
			}
		},
		async created() {
			// 查询页面所需参数
			let res = await getHandleParams(this.taskid)
			if (res.code == 0 && res.data != null) {
				this.n_stepid = res.data.stepid
				this.modelKey = res.data.modelKey
			}

			this.iframUrl = SFAPPROVE_URL + "?applyid=" + this.applyid + "&taskid=" + this.taskid + "&formid=" + this
				.formid + "&stepid=" + this.stepid + "&n_stepid=" + this.n_stepid + "&processinstanceid=" + this
				.processinstanceid + "&modelKey=" + this.modelKey + "&userid=" + this.userid
			// this.iframUrl = "http://localhost:8000/sfapprove-web/gzt_approval_form?applyid="+this.applyid+"&taskid="+this.taskid+"&formid="+this.formid+"&stepid="+this.stepid+"&n_stepid="+this.n_stepid+"&processinstanceid="+this.processinstanceid+"&modelKey="+this.modelKey+"&userid="+this.userid
		},
		mounted() {
			this.userid = JSON.parse(sessionStorage.getItem("APPROVE_USER")).userid

			this.getFileList()
			this.getMaterialList()
			this.getStepBtnList()
			this.getFindBehindTaskExecuser()

		},
		methods: {
			// 单选框触发改变
			radioChange(n) {
				this.radiovalue = n
				this.radiolist.forEach((v) => {
					if (this.radiovalue == v.text_) {
						if (v.variable) {
							this.btnVariable = eval(v.variable)
						}
					}
				})
			},

			// 查询相关材料
			async getMaterialList() {
				let res = await auditView(this.applyid)
				if (res.code == 0) {
					this.kind = res.data.type
					this.iscitymanager = res.data.iscitymanager
					this.proctype = res.data.proctype
					for (let key in Tp_proctypeEnum) {
						let process = Tp_proctypeEnum[key]
						let value = process.value
						if (value == this.kind) {
							this.title = process.name
							this.param = process.material
						}
					}
					this.name = Tp_procmaterial_decision_asynapprove.hear_asynapprove.name
					let value = Tp_procmaterial_decision_asynapprove.hear_asynapprove.value

					let cl = this.cl
					let params = this.param
					let materia = this.materiaList

					for (let key3 in materia) {
						let mattype = materia[key3].mattype
						if (value == mattype) {
							this.cl.push(this.materiaList[key3].file)
						}
					}

					for (let key1 in params) {
						let val = params[key1].value
						for (let key2 in materia) {
							let mattype = materia[key2].mattype
							if (val == mattype) {
								Object.assign(this.param[key1], this.materiaList[key2].file)
							}
						}
					}
				}
			},
			// 查询附件信息
			async getFileList() {
				let res = await getAllMaterialByApplyId(this.applyid_bs)
				if (res.code == 0) {
					this.materiaList = res.data
					this.customer = this.materiaList.filter(item => item.customerMaterial != null)
				}
			},
			// 附件预览
			preview(path) {
				let url = kkfilePreview(path)
				uni.navigateTo({
					url: '/pages/approve/todo/filePreview?path=' + url + "&applyid=" + this.applyid + "&taskid=" +
						this.taskid + "&formid=" + this.formid + "&stepid=" + this.stepid + "&processinstanceid=" +
						this.processinstanceid
				})
			},

			// 获取操作按钮
			async getStepBtnList() {
				if (this.isEdit) {
					let param = {
						formid: this.formid,
						stepid: this.stepid
					}
					let res = await viewByProcessStepId(param)
					this.pageInfo.f_stepid_ = res.data.stepid_
					let res1 = await queryAct_dsn_form_stepbtnList(this.pageInfo)
					if (res1.code == 0) {
						this.radiolist = res1.data.records.filter(item => item.stepid_ == this.pageInfo.f_stepid_)
					}
				}

			},

			// 完成业务接口
			async completeExec() {
				let params = {
					formid: this.formid,
					taskid: this.taskid,
					userid: this.userid
				}
				this.ProcessNextExecutor.handletext = this.radiovalue
				this.ProcessNextExecutor.remark = this.advice == '' ? '通过' : this.advice
				this.ProcessNextExecutor.variable = this.btnVariable

				let res = await taskExec(params, this.ProcessNextExecutor)
				if (res.code == 0) {
					// 跳转列表页
					uni.navigateTo({
						url: '/pages/approve/todo/todoList'
					})
				}
			},

			// 提交
			submit() {
				if (this.radiovalue == null) {
					uni.showToast({
						title: '请先选择操作按钮',
						icon: 'error',
						duration: 2000
					})
				} else if (this.advice == null) {
					uni.showToast({
						title: '请先填写意见',
						icon: 'error',
						duration: 2000
					})
				} else {
					// 有下一步处理人 弹出选择框
					if (this.taskObj.isNextPerson) {
						this.show = true
					} else {
						// 无下一步处理人 直接调接口
						console.log('没有下一步处理人')
						uni.showModal({
							title: '提示',
							content: '确定要提交吗？',
							success: (res) => {
								if (res.confirm) {
									// 调接口
									this.completeExec()
								}
							}
						})
					}
				}
			},

			// 退回业务接口
			async terminationInterface() {
				let params = {
					handletext: this.radiovalue,
					userid: this.useridt,
					taskid: this.taskid,
					deleteReason: this.ProcessNextExecutor.remark = this.ProcessNextExecutor.remark,
				}
				let res = await terminationTask(params, this.ProcessNextExecutor.service)
				if (res.code == 0) {
					// 跳转列表页
					uni.navigateTo({
						url: '/pages/approve/todo/todoList'
					})
				}
			},

			// 退回
			sendBack() {
				if (this.radiovalue == null) {
					uni.showToast({
						title: '请先选择操作按钮',
						icon: 'error',
						duration: 2000
					})
				} else if (this.advice == null) {
					uni.showToast({
						title: '请先填写意见',
						icon: 'error',
						duration: 2000
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定要退回吗？',
						success: (res) => {
							if (res.confirm) {
								//调接口
								this.terminationInterface()
							}
						}
					})
				}




			},

			// 查询流程上或下环节的信息
			async getFindBehindTaskExecuser() {
				if (this.isEdit) {
					this.processNext = null
					let res = await findBehindTaskExecuser({
						taskid: this.taskid,
						direction: 1
					})
					if (res.code == 0) {
						this.processNext = res.data || []
						this.variableList = []
						if (this.processNext.exist) {
							this.processNext.next.forEach((v) => {
								v.assignee.forEach((assignee) => {
									if (assignee.indexOf('$') > -1) {
										this.taskObj.isNextPerson = true
										let variable = assignee.slice(assignee.indexOf('${') + 2,
											assignee.indexOf('}'))
										this.variableMap[variable] = null
										v.variable = variable
										this.variableList.push(v)
									}
								})
							})
						}
						if (this.taskObj.isNextPerson) {
							this.getCandidateusers()
						}
					}
				}
			},

			// 查询候选人
			async getCandidateusers() {
				this.groupList = this.variableList[0].candidataGroups
				this.userList = this.variableList[0].candidataUsers
				this.variable = this.variableList[0].variable
				let res = await queryCandidateusers(this.applyid, this.groupList, this.userList)
				if (res.code == 0) {
					if (res.data && res.data.length > 0) {
						this.candidateList = [res.data]
					}
				}
			},

			// 选择器确定
			async confirm(e) {
				this.show = false

				let myValue = e.value[0].userid
				let variable = this.variable
				this.variableMap[variable] = myValue
				this.ProcessNextExecutor.variable = {
					...this.variableMap,
					...this.btnVariable
				}

				uni.showModal({
					title: '提示',
					content: '确定提交吗？',
					success: (res) => {
						if (res.confirm) {
							this.completeExec()
						}
					}
				})
			},

			// 查询常用语
			async getComwordList() {
				this.show1 = true
				let res = await queryList(this.comword, 'c17afc971d934f2b952b296c3d477dcb')
				if (res.code == 0) {
					if (res.data && res.data.length) {}
					this.menuList = res.data
				}
			},

			// 选择常用语
			addValue(Key) {
				this.advice = Key
				this.show1 = false
			},

			// 搜索常用语
			search() {
				this.getComwordList()
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	page {
		background-color: #F5F5F5 !important;
	}

	// 单选框控件样式
	.u-radio-group--row {
		float: left;
		width: 100%;
		flex: auto;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}

	.u-radio-group {
		float: left;
		flex: auto;
	}


	.detail {
		@extend .algin_justity_center;
		flex-direction: column;

		&_info {
			width: calc(100% - 120rpx);
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 20rpx;
			padding: 20rpx 20rpx;
		}

		&_material {
			width: calc(100% - 120rpx);
			height: 653rpx;
			background: #FFFFFF;
			box-shadow: 7rpx 8rpx 43rpx 0rpx #F5F5F5;
			border-radius: 20rpx;
			margin: 20rpx 20rpx;
			padding: 20rpx 20rpx;

			display: flex;
			align-items: flex-start;
			flex-direction: column;
			overflow: auto;

			&_title {
				margin-top: 15rpx;
				font-weight: bold;
				font-size: 34rpx;
				margin-left: 10rpx;
			}

			&_line {
				border: 1px solid #e8e8e8;
				width: 100vw;
				margin: 20rpx 0;
			}

			&_main {
				margin-bottom: 50rpx;

				&_name {
					display: flex;
					height: 40rpx;
					line-height: 40rpx;

					&_text {
						margin-left: 5px;
					}
				}

				&_filename {
					display: flex;
					margin-left: 20rpx;
					margin-top: 32rpx;
					font-size: 14px;
					color: #2295ff;

					&_text {
						margin-left: 8px;
					}
				}
			}

			&_empty {
				margin: auto;
			}

		}

		&_operate {
			width: calc(100% - 120rpx);
			background: #FFFFFF;
			box-shadow: 7rpx 8rpx 43rpx 0rpx #F5F5F5;
			border-radius: 20rpx;
			margin: 20rpx 20rpx;
			padding: 20rpx 20rpx;

			display: flex;
			align-items: flex-start;
			flex-direction: column;

			&_head {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1F1F1F;
				margin: 10rpx 0rpx;
			}
		}

		&_advice {
			width: calc(100% - 120rpx);
			// height: 317rpx;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 7rpx 8rpx 43rpx 0rpx #F5F5F5;
			border-radius: 20rpx;
			margin: 20rpx 20rpx;
			padding: 20rpx 20rpx;

			display: flex;
			align-items: flex-start;
			flex-direction: column;

			&_head {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #1F1F1F;
				margin: 10rpx 0rpx;
				display: flex;
				align-items: center;

				&_text {
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			&_input {
				width: 320px;
			}
		}

		&_button {
			width: 90%;
			margin-top: 10px;
			display: flex;
			margin-bottom: 10px;

			.u-button {
				border-radius: 20px;
			}

			.u-button:first-child {
				margin-right: 10px;
			}
		}

		.comword {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 1vh;
			height: 500rpx;

			.search {
				display: flex;
				margin-top: 10rpx;
			}

			&_hint {
				// margin-bottom: 1vh;
				margin-top: 20rpx;
				color: #b3b3b3;
				font-size: 13px;
				margin-left: 20rpx;
			}

			&_search {
				width: 38vw;
				margin-bottom: 1vh;
			}

			&_content {
				width: 100%;
				// height: 38vh;
			}

			&_content_piece {
				width: 100%;
				padding: 1vh;
				margin-bottom: 1vh;
				border: 1px solid #d9d9d9;
				border-radius: 5px;
				background-color: #faf8f8;
				display: inline-flex;
				justify-content: left;
				align-items: center;
				font-size: 16px;
				color: #000000;
				margin-top: 40rpx;
			}
		}

	}
</style>